import React, { Component } from 'react';
import "../styles/Tabbar.scss"



class Tabbar extends Component {
    constructor(props) {
        super(props)
        this.state = {
            currentIndex:0,
            list: [
                { icon: 'icon-shouye', text: '店铺' }, { icon: 'icon-fenlei', text: '分类' }, { icon: 'icon-diejia', text: '全部商品' }, { icon: 'icon-gouwuche', text: '购物车' }, { icon: 'icon-wode', text: '个人中心' }
            ]
        }
    }
    changeStatus(index){
        this.setState({currentIndex:index})
    }
    render() {
        return (
            <div className="tabbar">
                {
                    this.state.list.map((item, index) => {
                       return(
                         <div className={ 'tab ' + (this.state.currentIndex == index ? 'active' : '') } key={index} onClick={()=>{ this.changeStatus(index)}}>
                            <span className={'iconfont '+item.icon}></span>
                            <div className="text">{item.text}</div>
                        </div>
                       )
                    })
                }
            </div>
        );
    }
}

export default Tabbar;